<template>
  <div class="box mb-4">
    <div class="text-center relative">
      <label class="absolute top-0 left-0">Beginner</label>
      <img :src="userInfo.data.user.avatar" srcset="" alt="" class="user-avatar">
      <h4 class="text-lg"> {{ userInfo.data.user.name }}</h4>
      <p>{{ type }}</p>
    </div>
  </div>
  <div class="app-sidebar">
    <h4>仪表盘</h4>
    <div class="app-sidebar-nav" :class="{ active: item.path === $route.path }" v-for="(item) in navs" :key="item.path">
      <router-link :to="item.path">
        <i :class="item.icon"></i>
        {{ item.title }}
      </router-link>
    </div>
    <h4>账户信息</h4>
    <div class="app-sidebar-nav" :class="{ active: item.path === $route.path }" v-for="(item) in accountInfo"
      :key="item.path">
      <router-link :to="item.path">
        <i :class="item.icon"></i>
        {{ item.title }}
      </router-link>
    </div>
  </div>
</template>
<!-- 
style="" -->
<style scoped>
.relative {
  box-sizing: border-box;
  height: 300px;
  background-image: url('./instructor-profile-bg.jpg');
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-position: top;
  border-top-right-radius: 10px;
  border-top-left-radius: 10px;
  padding-top: 30px;
}

.user-avatar {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  margin: 0px auto 10px;
  border: 5px solid #FFFFFF;
}


a {
  padding: 20px;
  display: flex;
  align-items: center;
  font-size: 18px;
  font-weight: 400;
}

.app-sidebar {
  background: #fff;
  border-radius: 10px;
  padding: 15px;
}

i {
  margin-right: 15px;
  font-size: 20px;
  color: #FF875A;
}

.app-sidebar h4 {
  font-size: 18px;
  color: #392C7D;
  font-weight: 600;
  margin: 5px 0px 20px;

}

.app-sidebar-nav {
  border-top: 1px solid rgb(199 199 199 / 25%);
  position: relative;
  color: #303030;

}

.app-sidebar-nav.active,
.app-sidebar-nav:hover {
  background: rgba(255, 222, 218, 0.25);
}


.active::before,
.app-sidebar-nav:hover::before {
  content: "";
  position: absolute;
  background: #FF5364;
  width: 2px;
  height: 40px;
  left: 9px;
  top: 11px;
  transition: all 0.5s ease;
  opacity: 1;
}

.app-sidebar-nav.active ::before i::before {
  font-size: 20px;
}
</style>
<script setup>
defineProps({
  accountInfo: {
    type: Array,
    default: () => [{
      title: "编辑信息",
      icon: "icon-edit",
      path: "/edit",
    },
    {
      title: "编辑信息",
      icon: "icon-edit",
      path: "/edit",
    }, {
      title: "编辑信息",
      icon: "icon-edit",
      path: "/edit",
    }],
  },
});

import useUserInfo from '@/store/user';

const userInfo = useUserInfo()
const navs = computed(() => {
  return SIDEBARITEMS[userInfo.data.user.type]
})
const my = {
  title: "我的主页",
  icon: "feather-home",
  path: "/my",
}
const custom = {
  title: "我的客户",
  icon: "feather-users",
  path: "/custom",
}
const course = {
  title: "我的课程",
  icon: "feather-book",
  path: "/course",
}
const paper = {
  title: "我的试卷",
  icon: "feather-layers",
  path: "/paper",
}
const student = {
  title: "我的学生",
  icon: "feather-users",
  path: "/student",
}
const classes = {
  title: "我的班级",
  icon: "feather-package",
  path: "/class",
}
const recordTeach = {
  title: "我的授课",
  icon: "feather-pie-chart",
  path: "/record-teaching",
}
const recordExam = {
  title: "我的考试",
  icon: "feather-users",
  path: "/exam",
}

const Teachers = {
  title: "我的老师",
  icon: "feather-package",
  path: "/class",
}

const Learns = {
  title: "我的学习记录",
  icon: "feather-package",
  path: "/class",
}

const Errors = {
  title: "我的错题集",
  icon: "feather-package",
  path: "/class",
}

const MyWorks = {
  title: "我的作品",
  icon: "feather-package",
  path: "/class",
}

const Myhonors = {
  title: "我的荣誉",
  icon: "feather-package",
  path: "/class",
}

const SIDEBARITEMS = {
  "admin": [my, custom, course, paper],
  "master": [my, Teachers, classes, student, course, paper],
  "teacher": [my, course, paper, student, classes, recordTeach, recordExam],
  "student": [my, course, recordExam, Learns, Errors, MyWorks, Myhonors]
  // 只保留考试
  // "student": [recordExam]
}

const accountInfo = computed(() => {
  return [{
    title: "编辑信息",
    icon: "feather-settings",
    path: "/settings",
  },
  {
    title: "账号安全",
    icon: "feather-user",
    path: "/security",
  }, {
    title: "退出登录",
    icon: "feather-power",
    path: "/quit",
  }]
  //.map(it => {
  //   it.path = `/` + userInfo.data.user.type + `${it.path}`
  //   return it
  // }
})

const type = computed(() => {
  const map = {
    'admin': '管理员',
    'master': '校长',
    'teacher': '教师',
    'student': '学生'
  }
  return map[userInfo.data.user.type]
})
</script>